<template>
  <div class="topicBox">
    <div class="topicTop">
      <el-input
        v-model="item.name"
        :class="{ errInput: rules.name }"
      ></el-input>
      <div>
        <el-button type="text"
          ><i
            class="el-icon-delete"
            @click="() => $emit('removeBigQuestion', item)"
          ></i
        ></el-button>
        <el-button type="text" @click="changeSort('-')"
          ><i class="el-icon-top"></i
        ></el-button>
        <el-button type="text" @click="changeSort('+')"
          ><i class="el-icon-bottom"></i
        ></el-button>
        <span>{{ `共${item.xiao.length}题，合计${item.fenzhi}分` }}</span>
      </div>
    </div>
    <div class="topicBottom">
      <div class="topicBottomContent">
        <div v-if="item.xiao.length == 0" class="errBottom">请添加题目</div>
        <div v-else>
          <div v-for="xiao in item.xiao" class="xiaoItem" :id="item.sort+xiao.sort">
            <div class="xiaoInFo">
              <span> {{ xiao.sort }}.{{ xiao.itemInfo.questionTypes }} </span>
              <div>
                <el-button type="text"
                  ><i
                    class="el-icon-delete"
                    @click="removeTopic(xiao.itemInfo)"
                  ></i
                ></el-button>
                <el-button type="text"><i class="el-icon-top"></i></el-button>
                <el-button type="text"
                  ><i class="el-icon-bottom"></i
                ></el-button>
                <el-form label-width="45px">
                  <el-form-item label="分数">
                    <el-input
                      v-model="xiao.fenzhi"
                      type="number"
                      size="mini"
                      :class="{ errInputXiao: xiao.fenzhiIsNull }"
                    ></el-input> </el-form-item
                ></el-form>
              </div>
            </div>
            <div class="xiaoContent">
              <!-- 单选 -->
              <template v-if="xiao.itemInfo.questionTypes == '单选题'">
                <div
                  class="xiaoStem"
                  v-html="setContent(xiao.itemInfo.testItemContent)"
                ></div>
                <div class="xiaoOption">
                  <div
                    class="xiaoOptionItem"
                    v-for="option in xiao.itemInfo.answerList"
                  >
                    <el-radio
                      v-model="xiao.itemInfo.answerJ[0]"
                      :label="option.identifier"
                      disabled
                      >{{ option.identifier }}</el-radio
                    >
                    <div class="optionInput" v-if="option.answerContent">
                      <div v-html="setContent(option.answerContent)"></div>
                    </div>
                    <!-- <div class="optionInputBtn">
                      <el-button type="text"
                        ><i class="el-icon-delete"></i
                      ></el-button>
                      <el-button type="text"
                        ><i class="el-icon-top"></i
                      ></el-button>
                      <el-button type="text"
                        ><i class="el-icon-bottom"></i
                      ></el-button>
                    </div> -->
                  </div>
                </div>
                <div class="analysisBox"
                     v-if="xiao.itemInfo.analysis">
                  <div class="analyTitle">解析详情</div>
                  <div
                    class="anlysisHtml"
                    v-html="setContent(gogo(xiao.itemInfo.analysis))"
                  ></div>
                </div>
              </template>
              <!-- 单选 -->
              <!-- 多选 -->
              <template v-if="xiao.itemInfo.questionTypes == '多选题'">
                <div
                  class="xiaoStem"
                  v-html="setContent(xiao.itemInfo.testItemContent)"
                ></div>
                <div class="xiaoOption">
                  <div
                    class="xiaoOptionItem"
                    v-for="option in xiao.itemInfo.answerList"
                  >
                    <el-checkbox
                      :label="option.identifier"
                      disabled
                      :checked="
                        xiao.itemInfo.answerJ.includes(option.identifier)
                      "
                      >{{ option.identifier }}</el-checkbox
                    >
                    <div class="optionInput" v-if="option.answerContent">
                      <div v-html="setContent(option.answerContent)"></div>
                    </div>
                  </div>
                </div>
                <div class="analysisBox"
                     v-if="xiao.itemInfo.analysis">
                  <div class="analyTitle">解析详情</div>
                  <div
                    class="anlysisHtml"
                    v-html="setContent(xiao.itemInfo.analysis)"
                  ></div>
                </div>
              </template>
              <!-- 多选 -->
              <!-- 判断 -->
              <template v-if="xiao.itemInfo.questionTypes == '判断题'">
                <div
                  class="xiaoStem"
                  v-html="setContent(xiao.itemInfo.testItemContent)"
                ></div>
                <div class="xiaoOption" style="margin: 15px 0">
                  <el-radio label="1">正确</el-radio>
                  <el-radio label="2">错误</el-radio>
                </div>
                <div class="analysisBox"
                     v-if="xiao.itemInfo.analysis">
                  <div class="analyTitle">解析详情</div>
                  <div
                    v-if="xiao.itemInfo.analysis"
                    class="anlysisHtml"
                    v-html="setContent(xiao.itemInfo.analysis)"
                  ></div>
                </div>
              </template>
              <!-- 判断 -->
              <!-- 应用 -->
              <template v-if="xiao.itemInfo.questionTypes == '应用题'">
                <div
                  class="xiaoStem"
                  v-html="setContent(xiao.itemInfo.testItemContent)"
                ></div>
                <div class="analysisBox"
                     v-if="xiao.itemInfo.analysis">
                  <div class="analyTitle">解析详情</div>
                  <div

                    class="anlysisHtml"
                    v-html="setContent(gogo(xiao.itemInfo.analysis))"
                  ></div>
                </div>
              </template>
              <!-- 应用 -->
              <!-- 填空 -->
              <template v-if="xiao.itemInfo.questionTypes == '填空题'">
                <div
                  class="xiaoStem"
                  v-html="setContent(xiao.itemInfo.testItemContent)"
                ></div>
                <div class="xiaoOption">
                  <div
                    class="xiaoOptionItem"
                    v-if="option.answerContent"
                    v-for="option in xiao.itemInfo.answerList"
                  >
                    <div class="optionInput">
                      <div v-html="setContent(option.answerContent)"></div>
                    </div>
                  </div>
                </div>
                <div class="analysisBox"
                     v-if="xiao.itemInfo.analysis">
                  <div class="analyTitle">解析详情</div>
                  <div
                    class="anlysisHtml"
                    v-html="setContent(xiao.itemInfo.analysis)"
                  ></div>
                </div>
              </template>
              <!-- 填空 -->
            </div>
          </div>
        </div>
      </div>
      <div class="topicBottomFooter">
        <el-button
          type="primary"
          icon="el-icon-circle-plus"
          @click="(dialogVisible = true), getQuertionBankList()"
          >添加题目</el-button
        >
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="1100px">
      <div class="selectTitle" slot="title">选择试题</div>
      <div class="selectDia">
        <el-form
          ref="form"
          :model="queryParams"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="试题分类">
            <el-cascader
              placeholder="试试搜索：指南"
              :options="treeData"
              :ref="`dia${index}`"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                emitPath: false,
              }"
              @change="handleNodeClick"
              filterable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="标签">
            <div class="formItemInput" @click="visibles.open = true"></div>
            <el-input
              placeholder="标签"

              v-model="queryParams1.questionTypesName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="题型">
            <el-select v-model="queryParams.questionTypes" placeholder="请选择">
              <el-option
                v-for="item in dict.type.test_question_types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难易度">
            <el-select v-model="queryParams.difficulty" placeholder="请选择">
              <el-option label="简单" value="简单"></el-option>
              <el-option label="普通" value="普通"></el-option>
              <el-option label="困难" value="困难"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型">
            <el-select v-model="queryParams.questionTypes" placeholder="请选择">
              <el-option label="单选题" value="单选题"></el-option>
              <el-option label="多选题" value="多选题"></el-option>
              <el-option label="判断题" value="判断题"></el-option>
              <el-option label="应用题" value="应用题"></el-option>
              <el-option label="填空题" value="填空题"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题内容">
            <el-input
              placeholder="试题内容"
              v-model="queryParams.testItemContent"
            ></el-input>
          </el-form-item>
          <el-form-item label="解析">
            <el-input
              placeholder="标题"
              v-model="queryParams.analysis"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建者">
            <el-input
              placeholder="标题"
              v-model="queryParams.createBy"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="topBtn">
          <div @click="reserve">重置</div>
          <div @click="getQuertionBankList">搜索</div>
        </div>
        <div class="selectTable">
          <el-table
            ref="tableRow"
            :data="tableData"
            style="width: 100%"
            class="tableColumn"
          >
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <div class="tableBtn">
                  <i
                    class="el-icon-circle-plus"
                    @click="addTopic(scope.row)"
                    v-if="scope.row.isChange == 0"
                  ></i>
                  <i
                    class="el-icon-remove"
                    @click="removeTopic(scope.row)"
                    v-else
                  ></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="日期">
              <template slot-scope="scope">
                <div
                  v-html="setContent(gogo(scope.row.testItemContent))"
                  style="word-wrap: normal; overflow: hidden"
                ></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getQuertionBankList"
          />
        </div>
      </div>
    </el-dialog>
    <!-- 添加标签 -->
    <ul
      ref="card"
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="selectedNode(oldClick)">
        <i class="el-icon-circle-plus-outline"></i> 添加标签
      </li>
    </ul>

    <el-dialog
      title="提示"
      :visible.sync="visibles.open"
      width="50vw"
      class="dialogAddTree"
    >
      <div
        style="height: 68vh; display: flex; min-height: 800px; overflow: auto"
      >
        <div class="diaLeft">
          <div
            @click="clickTypeClass(item)"
            v-for="(item, index) in typeClassList"
            class="diaItem"
            :key="index"
          >
            {{ item.tagHeaderName }}
          </div>
        </div>
        <div class="diaRight">
          <el-tree
            :data="typeTreeData"
            :props="defaultProps1"
            :highlight-current="true"
            :default-expand-all="false"
            @node-click="openMenu"

          >
<!--            <span class="custom-tree-node" slot-scope="{node,data}">-->
<!--              <span   @click="onClick">{{node.label}}</span>-->
<!--            </span>-->

          </el-tree>
        </div>
      </div>
      <ul
        ref="card"
        v-show="visible"
        :style="{ left: left + 'px', top: top + 'px' }"
        class="contextmenu"
      >
        <li @click="selectedNode(oldClick)">
          <i class="el-icon-circle-plus-outline"></i> 添加标签
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import { listBank, getBank } from "@/api/questionBank/management";
import {listTypes, listHeader} from "@/api/questionBank/type.js";

export default {
  dicts: ["test_question_types"],
  props: {
    item: {
      type: Object,
      require: true,
    },
    index: {
      type: String,
    },
  },

  data() {
    return {
      isDisplay: true,
      dialogVisible: false,
      treeData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        entityClassificationId: null,
        params:{}
      },
      total: 0,
      tableData: [],
      rules: {
        name: false,
      },

      queryParams1: {
        questionTypesName: "",
      },
      visibles: {
        open: false,
      },
      //搜索
      typeClassList: [],
      defaultProps1: {
        children: "children",
        label: "name",
        value: "id",
      },
      typeTreeData: [],
      visible: false,
      top: 0,
      left: 0,
      oldClick: {},
      oneTime:'',//单机时间戳
    };
  },
  mounted() {
    this.getTreeData();
    this.getListTypesClass();
  },
  updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },

  watch:{

  }
  ,

  methods: {
    onClick(){
      console.log('单机')
    },
    getTreeData() {
      this.$store.dispatch("questionBank/actionClassification").then((res) => {
        this.treeData = res;
      });
    },
    //点击级联分类
    handleNodeClick(val) {
      this.queryParams.entityClassificationId = val;
      this.getQuertionBankList();
    },
    //获取试题列表
    getQuertionBankList() {
      listBank(this.queryParams).then((res) => {
        this.tableData = this.tableInIt(res.rows);
        this.total = res.total;
      });
    },
    //重置
    reserve() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        entityClassificationId: null,
        params:{},
        difficulty: null,
        createBy: null,
        analysis:null,
        testItemContent:null,
        questionTypes:null

      };
      this.queryParams1= {
        questionTypesName: "",
      }

      // 清空级联选择器选中状态
      this.$refs[`dia${this.index}`].$refs.panel.clearCheckedNodes();
      // 清除⾼亮
      this.$refs[`dia${this.index}`].$refs.panel.activePath = [];
      this.getQuertionBankList();
    },
    //table数据处理
    tableInIt(val) {
      val.forEach((ele) => {
        if (this.item.xiao.length == 0) {
          this.$set(ele, "isChange", 0);
          console.log("为空");
        } else {
          this.$set(ele, "isChange", 0);

          for (let i = 0; i < this.item.xiao.length; i++) {
            if (ele.itemBankId == this.item.xiao[i].itemInfo.itemBankId) {
              this.$set(ele, "isChange", 1);
            }
          }
        }
      });
      return val;
    },

    //获取试题详情
    getBankDetail(val) {
      getBank(val).then((res) => {
        if (res.code == 200) {
          let num = this.item.xiao.length;

          let obj = {
            xName: `第${this.numberToUpperCase(num)}小题`,
            sort: num + 1,
            index: num + 1,
            fenzhi: 0,
            fenzhiIsNull: false,
            itemBankId: res.data.itemBankId,
            itemInfo: res.data,
          };
          this.item.xiao.push(obj);
        }
      });
    },

    //对数组进行重新排序
    sortEvent() {
      this.item.xiao.sort(function (a, b) {
        return a.sort - b.sort;
      });
    },
    //添加小题
    addTopic(row) {
      row.isChange = 1;
      this.getBankDetail(row.itemBankId);
    },
    //删除小题
    removeTopic(row) {
      // 获取需要删除元素的索引
      function getRemoveIndex() {
        for (let i = 0; i < this.item.xiao.length; i++) {
          console.log(this.item.xiao[i].itemBankId, row.itemBankId);
          if (this.item.xiao[i].itemBankId === row.itemBankId) {
            return i;
          }
        }
        return -1; // 如果没有找到，返回-1
      }

      // 获取要删除的元素的索引
      let indexToRemove = getRemoveIndex.call(this);

      // 如果找到了索引，则使用splice删除元素
      if (indexToRemove !== -1) {
        this.item.xiao.splice(indexToRemove, 1);
        // row.isChange = 0;
        this.$set(row, "isChange", 0);
      }

      this.updateSorting(this.item.xiao);

      // 输出修改后的数组和长度
      console.log(this.item.xiao, this.item.xiao.length, indexToRemove, "666");
    },
    //数字边大写数字
    numberToUpperCase(textIndex) {
      let newString = "";
      let newTextIndex = textIndex + 1 + "";

      function sum(value, index) {
        var newValue = "";
        if (textIndex === 9) {
          return !index ? "十" : "";
        }
        let isSeat = ~~textIndex > 9 && ~~textIndex < 19;
        switch (~~value) {
          case 1:
            newValue = !index ? (isSeat ? "" : "一") : "十一";
            break;
          case 2:
            newValue = !index ? (isSeat ? "" : "二") : "十二";
            break;
          case 3:
            newValue = !index ? (isSeat ? "" : "三") : "十三";
            break;
          case 4:
            newValue = !index ? (isSeat ? "" : "四") : "十四";
            break;
          case 5:
            newValue = !index ? (isSeat ? "" : "五") : "十五";
            break;
          case 6:
            newValue = !index ? (isSeat ? "" : "六") : "十六";
            break;
          case 7:
            newValue = !index ? (isSeat ? "" : "七") : "十七";
            break;
          case 8:
            newValue = !index ? (isSeat ? "" : "八") : "十八";
            break;
          case 9:
            newValue = !index ? (isSeat ? "" : "九") : "十九";
            break;
          case 0:
            newValue = "十";
            break;
          default:
            break;
        }
        return newValue;
      }

      for (let i = 0; i < newTextIndex.length; i++) {
        newString += sum(newTextIndex.substring(i, i + 1), i);
      }
      return newString;
    },
    //更新排序
    updateSorting(val) {
      val.forEach((ele, index) => {
        this.$set(ele, "sort", index + 1);
        this.$set(ele, "index", index + 1);
      });
    },
    //更改大题排序
    changeSort(val) {
      if (val == "+") {
        this.item.sort += 2;
      }
      if (val == "-") {
        this.item.sort -= 2;
      }
      console.log(this.item);
      this.$emit("sortEvent");
    },
    //提交事件
    submitTopic() {
      if (this.item.name == "" || this.item.name == null) {
        this.rules.name = true;
        this.$message.error("大题标题不能为空");
        return false;
      }
      if (this.item.xiao.length == 0) {
        this.$message.error(`${this.item.name}的小题不能为空`);
        return false;
      }
      this.item.xiao.forEach((ele) => {
        if (ele.fenzhi === "" || ele.fenzhi == 0) {
          ele.fenzhiIsNull = true;
        } else {
          ele.fenzhiIsNull = false;
        }
      });
      let self = this;
      function areAllKeysEmpty(keyToCheck) {
        return self.item.xiao.every((obj) => {
          return (
            !obj.hasOwnProperty(keyToCheck) ||
            obj[keyToCheck] === "" ||
            obj[keyToCheck] == 0
          );
        });
      }
      if (areAllKeysEmpty("fenzhi")) {
        this.$message.error(`小题分值不能为0`);
        return false
      }
      return true
    },

    //点击树状图添加标签
    selectedNode(data, node, event) {
      this.queryParams.params.questionTypesId = data.id;
      this.queryParams1.questionTypesName = data.name;
      this.visible = false;
      this.visibles.open = false;
    },
    //form表单搜索
    //标签
    getListTypesClass() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      listHeader(obj).then((res) => {
        this.typeClassList = res.rows;
        this.clickTypeClass(res.rows[0]);
      });
    },
    //点击标签分类
    clickTypeClass(item) {
      listTypes({reserve3: item.tagHeaderId}).then((res) => {
        this.typeTreeData = res.rows;
      });
    },
    // openMenu(event, data) {
    openMenu( data) {
      // this.left = event.clientX;
      // this.top = event.clientY;
      // this.visible = true;

      let nn=JSON.stringify(data)
      let oo=JSON.stringify(this.oldClick)
      if(nn==oo){
        // console.log('相同的',nn,oo)
        let newTime=new Date().getTime()
        if((newTime-this.oneTime)<=500){
          console.log('双击')
          this.selectedNode(data)
        }
      }



      this.oneTime=new Date().getTime()
      this.oldClick = data;



    },
    //img去除\\
    setContent(val) {
      try {
        if (val.includes('\\\\"')) {
          let abc = val.replaceAll('\\\\"', "");
          return abc;
        } else {
          let abc = val.replaceAll('\\"', "");
          return abc;
        }
      }catch (e) {
        console.log(e,'报错',val)
        return ''
      }
    },

    gogo(val) {
      // console.log(val);
      if (val == "" || val == null) return;
      let item = JSON.parse(JSON.stringify(val));
      let ord = /begin{array}([\s\S]*?)\\end{array}/g; // 定义正则表达式，用于匹配以 [\begin{array} 开头的字符串

      let arr = item.match(ord); // 使用 match 方法获取所有匹配项
      // console.log(arr, "arr");
      if (arr == null || arr.length == 0) return val;

      let deleP = (P) => {
        let newP = P.split("<p>");
        let a = newP.join(" ");
        let b = a.split("</p>");
        let c = b.join(" ");
        // console.log(c, "newp");
        return c;
      };

      let abc = null;
      arr.forEach((ele) => {
        abc = val.split(ele);
        abc = abc.join(deleP(ele));
      });
      return abc;
      console.log(abc, "拼接完成");
    },
  },
};
</script>
<style lang="scss" scoped>
.topicBox {
  // min-height: 200px;
  margin-bottom: 15px;
  border: 1px solid #ebeef6;
  .topicTop {
    height: 60px;
    background-color: #f7f8fa;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-input {
      width: 40%;
    }
    > div:nth-of-type(2) {
      display: flex;
      align-items: center;
      color: #656577;
      i {
        margin-left: 15px;
        color: #656577;
      }
      > span {
        margin-left: 15px;
      }
    }
  }
  .topicBottom {
    .topicBottomContent {
      // height: 150px;

      .errBottom {
        text-align: center;
        color: #656577;
        line-height: 150px;
        font-size: 12px;
      }
    }
    .topicBottomFooter {
      height: 70px;
      display: flex;
      align-items: center;
      margin: 0 15px;
      border-top: 1px solid #ebeef6;
    }
  }
}

.selectDia {
  height: 800px;
 ::v-deep .el-input.is-disabled .el-input__inner{
    background-color: #fff;
   cursor: pointer;
   color: #606266;
  }



  .topBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      padding: 10px 20px;
      font-size: 12px;
      cursor: pointer;
    }
    > div:nth-of-type(1) {
      background-color: #65657729;
    }
    > div:nth-of-type(2) {
      background-color: #090985f4;
      margin-left: 15px;
      color: white;
    }
  }
}
.selectTitle {
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.selectTable {
  height: 525px;
  overflow: auto;
  .tableColumn {
    .tableBtn {
      i {
        font-size: 30px;
      }
      .el-icon-remove {
        color: blue;
      }
    }
  }
}

.xiaoItem {
  padding: 0 15px;
  .xiaoInFo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    > div {
      display: flex;
      align-items: center;
      i {
        margin-left: 5px;
        color: #656577;
      }
      > .el-form {
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
  }
  .xiaoContent {
    min-height: 400px;
    .xiaoStem {
      border: 1px solid #ebeef6;
      padding: 10px;
    }

    .xiaoOption {
      .el-radio-group {
        width: 100%;
      }
      .xiaoOptionItem {
        display: flex;
        align-items: center;
        .optionInput {
          width: 100%;
          flex: 1;
          border: 1px solid #ebeef6;
          margin: 5px;
          > div {
            padding: 0 10px;
          }
        }
        .optionInputBtn {
          opacity: 0;
          height: 100%;
          i {
            color: #656577;
          }
        }
      }
      .xiaoOptionItem:hover {
        .optionInput {
          border: 1px solid #3a63f3;
        }
        .optionInputBtn {
          height: 100%;
          opacity: 1;
          i {
            color: #656577;
          }
        }
      }
    }

    .analysisBox {
      // padding: 0 15px;
      .analyTitle {
        font-size: 14px;
        margin: 10px 0;
      }

      .anlysisHtml {
        border: 1px solid #ebeef6;
        padding: 10px;
      }
    }
  }
}

.errInput {
  .el-input__inner {
    border: 1px solid red;
  }
}
.errInputXiao {
  .el-input__inner {
    border: 1px solid red;
  }
}
//搜索
.dialogAddTree {
  ::v-deep .el-dialog {
    min-width: 1070px;
    // position: relative;
  }
}


.diaRight {
  flex: 1;
}

.diaLeft {
  min-width: 250px;
  text-align: center;

  .diaItem {
    line-height: 40px;
  }

  .diaItem:hover {
    background-color: #dcdfe6;
    cursor: pointer;
  }
}

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }
  }
}


//透明层
.formItemInput{
  position: absolute;
  width: 100%;
  height: 100%;
  //background-color: red;
  top: 0;
  left: 0;
  z-index: 2;
}
</style>
